<style>

    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .panel-body {
        padding: 10px 10px 0 10px;
    }

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }

    .panel-content {
        margin-top: 12px;
    }

    .label {
        display: inline;
        padding: .5em;
        font-size: 100%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        cursor: pointer;
    }

    .pull-right {
        float: right;
    }

    .layui-red {
        color: red
    }

    .main_btn > p {
        height: 40px;
    }

    .layui-bg-number {
        background-color: #F8F8F8;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 10px;
    }

    .right-bottom-btn {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #FFF;
        z-index: 999;
        background: #5E7CE0;
        cursor: pointer;
        border-radius: 30px;
        box-shadow: 0px 0px 20px #000;
    }
</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div id="content">


        </div>
    </div>
</div>

<!-- 右侧悬浮按钮 -->
<div class="right-bottom-btn" id="addProject" lay-on="addProject">
    <i class="layui-icon layui-icon-addition" style="color: white; font-size: 30px; font-weight: bold"></i>
</div>


<script type="text/html" id="addDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="add-form" id="add-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="projectName" lay-verify="required" lay-vertype="tips" lay-reqtext="项目名称不能为空" placeholder="请输入项目名称" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">项目路径</label>
                <div class="layui-input-block">
                    <input type="text" name="path" lay-verify="required|pathCheck" lay-vertype="tips" lay-reqtext="项目路径不能为空" placeholder="请输入项目路径" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">项目介绍</label>
                <div class="layui-input-block">
                    <textarea name="introduce" class="layui-textarea" placeholder="请输入项目介绍"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="addSaveBtn">保存</button>
            </div>
        </form>
    </div>
</script>


<script type="text/html" id="editDialog">
    <div class="layuimini-form">
        <form class="layui-form" action="" lay-filter="edit-form" id="edit-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="projectName" lay-verify="required" lay-vertype="tips" lay-reqtext="项目名称不能为空" placeholder="请输入项目名称" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">项目路径</label>
                <div class="layui-input-block">
                    <input type="text" name="path" lay-verify="required|pathCheck" lay-vertype="tips" lay-reqtext="项目路径不能为空" placeholder="请输入项目路径" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">项目介绍</label>
                <div class="layui-input-block">
                    <textarea name="introduce" class="layui-textarea" placeholder="请输入项目介绍"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="editSaveBtn">保存</button>
            </div>
        </form>
    </div>
</script>

<script>
    layui.use(['form', 'util', 'miniAjax'], function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer,
            miniAjax = layui.miniAjax,
            util = layui.util;

        form.verify({
            pathCheck: function (value, item) {
                if (!!value) {
                    if (!value.startsWith('/')) {
                        return ('项目路径必须以/开头');
                    }
                    const n = (value.split('/')).length - 1;
                    if (n > 1) {
                        return ('项目路径只能有一个/');
                    } else {
                    }
                } else {
                    return ('项目路径不能为空');
                }
            }
        });

        let projectList = [];
        queryProject();

        function queryProject() {
            miniAjax.get({
                url: "/projectinfo/query",
                success: function (res) {
                    if (res.code === 0) {
                        projectList = res.data;
                        if (projectList && projectList.length > 0) {
                            renderCardList(projectList);
                        } else {
                            renderNotice();
                        }
                    } else {
                        layer.msg(res.msg, {time: 1000, icon: 2});
                    }
                },
                error: function (error) {
                    layer.msg(error, {time: 1000, icon: 2});
                }
            });
        }

        function renderNotice() {
            var content = '<blockquote class="layui-elem-quote" id="notice" style="margin-bottom: 0">' +
                '暂无项目，请点击右下角按钮进行创建' +
                '</blockquote>';
            $("#content").empty();
            $("#content").append(content);
        }

        function renderCardList(projectList) {
            let content = "";
            // 四个分成一份，不够四个的话也为一份
            let projectChunkedArray = chunkArray(projectList, 4);
            for (let chunk of projectChunkedArray) {
                content = content + `<div class="layui-row layui-col-space15" style="margin: 0">`;
                for (let item of chunk) {
                    content = content + '<div class="layui-col-md3">'
                        + '<div class="panel layui-bg-number">'
                        + '<div class="panel-body">'
                        + '<div class="panel-title">'
                        + `<span class="label pull-right layui-bg-green" layuimini-content-href="page/mock.html?projectId=${item.id}" data-title="接口管理" into-id="${item.id}">进入项目</span>`
                        + '<h2>' + item.projectName + '</h2>'
                        + '</div>'
                        + '<div class="panel-content">'
                        + '<div class="text item"><span>身份：</span>' + '<span class="layui-badge-rim">' + item.mark + '</span>' + '</div>'
                        + '<div class="text item"><span>路径：' + item.path + '</span></div>'
                        + '<div class="text item"><span>描述：' + item.introduce + '</span></div>'
                        + '<div class="text item">'
                        + '<span>操作：</span>'
                        + '<span class="layui-badge layui-bg-blue" style="cursor: pointer;" edit-id="' + item.id + '">编辑</span>'
                        + '<span class="layui-badge" style="margin-left: 5px;cursor: pointer;" del-id="' + item.id + '">删除</span>'
                        + '</div>'
                        + '</div>'
                        + '</div>'
                        + '</div>'
                        + '</div>';
                }
                content = content + `</div>`;
            }
            $("#content").empty();
            $("#content").append(content);
        }

        $('#content').on('click', '[into-id]', function () {
            var id = $(this).attr('into-id');
            sessionStorage.setItem("projectId", id)
        });

        $('#content').on('click', '[edit-id]', function () {
            var id = $(this).attr('edit-id');
            var index = layer.open({
                title: '编辑项目',
                type: 1,
                shade: 0.2,
                maxmin: true,
                shadeClose: false,
                area: '580px', // 宽度580, 高度自适应
                btn: ['保存', '取消'], // 自定义按钮
                yes: function(index, layero) {
                    layero.find("button[lay-filter='editSaveBtn']").click();
                },
                content: $('#editDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    var lineData = projectList.find(obj => obj.id === id);
                    form.val('edit-form', lineData);
                    // 表单提交事件
                    form.on('submit(editSaveBtn)', function (data) {
                        data.field.id = id;
                        miniAjax.postJSON({
                            url: '/projectinfo/edit',
                            data: JSON.stringify(data.field),
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                        layer.close(dIndex);
                                    });
                                } else {
                                    layer.msg(res.msg, {time: 1000, icon: 2});
                                }
                            },
                            error: function (error) {
                                layer.msg(error, {time: 1000, icon: 2});
                            }
                        });
                        return false;
                    });

                    // 监听取消按钮
                    layero.find("button[lay-filter='closeEditDialog']").click(function(){
                        layer.close(dIndex);
                    });
                },
                end: function (index) {
                    // 重载表格，刷新数据
                    queryProject();
                }
            });
        });

        $('#content').on('click', '[del-id]', function () {
            var id = $(this).attr('del-id');

            layer.prompt({title: '确定删除此项目吗，此操作无法撤消', placeholder: '请输入项目名称以进行确认'}, function(value, dIndex, elem){
                if(value === '') {
                    return elem.focus();
                }
                let projectName = util.escape(value);
                miniAjax.postJSON({
                    url: '/projectinfo/delete',
                    data: JSON.stringify({id: id, projectName: projectName}),
                    success: function (res) {
                        if (res.code === 0) {
                            // 关闭 prompt
                            layer.close(dIndex);
                            layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                // 重载表格，刷新数据
                                queryProject();
                            });
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    },
                    error: function (error) {
                        layer.msg(error, {time: 1000, icon: 2});
                    }
                });
            });
        });

        util.on('lay-on', {
            addProject: function () {
                var index = layer.open({
                    title: '新增项目',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: false,
                    area: '580px', // 宽度580, 高度自适应
                    btn: ['保存', '取消'], // 自定义按钮
                    yes: function(index, layero) {
                        layero.find("button[lay-filter='addSaveBtn']").click();
                    },
                    content: $('#addDialog').html(),
                    success: function (layero, dIndex) {
                        // 表单提交事件
                        form.on('submit(addSaveBtn)', function (data) {
                            miniAjax.postJSON({
                                url: '/projectinfo/add',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.msg(res.msg, {time: 1000, icon: 1}, function () {
                                            layer.close(dIndex);
                                        });
                                    } else {
                                        layer.msg(res.msg, {time: 1000, icon: 2});
                                    }
                                },
                                error: function (error) {
                                    layer.msg(error, {time: 1000, icon: 2});
                                }
                            });
                            return false;
                        });
                        // 监听取消按钮
                        layero.find("button[lay-filter='closeAddDialog']").click(function(){
                            layer.close(dIndex);
                        });
                    },
                    end: function (index) {
                        // 重载表格，刷新数据
                        queryProject();
                    }
                });
            },
        });
    });

    /**
     * 将任意长度的数组按照指定大小分割成多个子数组，
     * 最后的即使不够指定大小也会算作一份
     * @param array 原始数组
     * @param chunkSize 每份的大小
     * @returns {*[]}
     */
    function chunkArray(array, chunkSize) {
        let index = 0;
        let arrayLength = array.length;
        let tempArray = [];

        for (index = 0; index < arrayLength; index += chunkSize) {
            let myChunk = array.slice(index, index + chunkSize);
            tempArray.push(myChunk);
        }

        return tempArray;
    }
</script>